<{include file="header.html"}>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.setOnLoadCallback(init);
function initialize() {
    geocoder = new google.maps.Geocoder();
    if (geocoder) {    
        geocoder.geocode( { 'address': 'Unit 4104, 288 St Moritz Drive SW, Calgary, AB, T3H 5H8'}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                latlng = results[0].geometry.location;

                center_circle = latlng+"";
                center_circle =center_circle.replace("(","");
                center_circle =center_circle.replace(" ","");
                center_circle =center_circle.replace(")","");
                var coor=center_circle.split(",");
                var x2=parseFloat(coor[0]);
                var y2=parseFloat(coor[1]);
                var yellowIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png";
                var nkbm = new google.maps.LatLng(x2,y2);
				var center = new google.maps.LatLng(51.036939, -114.211132);
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                  center: center,
                  zoom: 15,
                  mapTypeId: 'roadmap'
                });
                var html = '<div style="text-align:left"><table width="320" align="left" style="text-align:left"><tr><td valign="top"><span style="font-size:16;font-weight:bold;"><{$smarty.const.SHOP_NAME|utf8_escape_js}></span> <br /> <{$smarty.const.SHOP_ADDRESS|utf8_escape_js}><br />Phone :  <{$smarty.const.CONTACT_PHONE_LINE|utf8_escape_js}><br />Email : <a href="mailto:<{$smarty.const.CONTACT_EMAIL|utf8_escape_html}>" title="Email address"><{$smarty.const.CONTACT_EMAIL|utf8_escape_html}></a></td></tr></table></div>';
                var infowindowCenter = new google.maps.InfoWindow({
                        content: html
                    });
                var marker = new google.maps.Marker({
                    position: nkbm,
                    map: map,
                    icon: yellowIcon
                });
                google.maps.event.addListener(marker, 'mouseover', function() {

                        infowindowCenter.open(map, this);
                    });
                    google.maps.event.addListener(marker, 'mouseout', function() {

                        infowindowCenter.close(map, this);
                    });
            }
        });
    }
    
}

</script>
<div id="content">
    <div class="container">
        <div class="main-content">
            <h1 class="title"><{$smarty.const._LB_HOW_TO_GET_TO_US|utf8_escape_html}></h1>
            <div id="map_canvas" style="width:100%;height:500px"></div>
        </div>
        <div class="sidebar">
            <{include file="right_business_hours.html"}>
			<{include file="right_testimonial.html"}>
        </div><!--End .sidebar-->
</div>
</div>
<script>
    initialize();
</script>
<{include file="footer.html"}>